<template>
<div :id="id" class="edit-tags" :style="{'max-height': height}">
  
  <div class="wrap" :style="{'max-width': isEdit ? 'calc(100% - 120px)' : '100%', 'height': height}">
    <div class="inner">
      <el-tag
        class="tag"
        :size="size"
        :key="index"
        v-for="(tag, index) in tags"
        :closable = "isEdit"
        :disable-transitions="false"
        @close="handleClose(index)">
        {{tag}}
      </el-tag>
    </div>
    
  </div>
  <input type="text" class="edit" :style="{'height': height}"
   v-model="query" v-show="edit" @keydown.enter="inputSave"/>
  <el-tag class="add" :size="size" v-show="isEdit" :disable-transitions="true" @click.native="editClick">{{edit ? '保存' : '+ 添加'}}</el-tag>
  
  
   
</div>
</template>

<style lang="scss" scoped>
@import '../../style/_vars.scss';
.edit-tags{
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  
  .wrap{
    order: 0;
    height: 100%;
    max-height: 100%;
    // min-width: 280px;
    // max-width: calc(100% - 120px);
    overflow: hidden;
    .inner{
      padding: 0;
    }
  }
  .wrap:hover{
    overflow: visible;
     z-index: 8;
    .inner{
      padding: 0 5px 5px 3px;
      box-shadow: 2px 2px 2px 1px $--border-color-base;
      background: white;
     
    }
    
  }
  .edit{
    display: inline-block;
    height: auto; // 95%;
    width: 120px;
    border: 1px solid $--color-primary-light-5;
    border-radius: 5px;
    margin: 0 5px;
  }
  /deep/ .el-tag.tag {
    margin-top: 0;
    margin-right: 10px;
    margin-bottom: 8px;
  }
  /deep/ .el-tag.add, .el-tag.all {
    margin: 1px 5px 0;
  }
}
</style>

<script>

export default {
  name: 'editTags',
  components: {
  },
  props: {
    size: {
      type: String,
      default: 'small'
    },
    height: {
      type: String,
      default: '100%'
    },
    isEdit: {
      type: Boolean,
      default: true
    },
    id: {
      type: String,
      default: ''
    },
    defaultTags: {
      type: Array,
      default: () => { return [] }
    },
    changeFn: {
      type: Function
    }
  },
  data() {
    return {
      edit: false,
      showAll: false,
      query: '',
      tags: this.defaultTags.concat()
    }
  },
  computed: {
   
  },
  watch: {
    tags(val) {
      if (this.changeFn && typeof this.changeFn === 'function') {
        this.changeFn(this.tags, this)
      }
    }
  },
  methods: {
    handleClose(index) {
      this.tags.splice(index, 1);
    },
    editClick() {
      if (!this.edit) {
        this.edit = true
        return
      }
      this.inputSave()
    },
    inputSave() {
      if (!this.edit) {
        return
      }
      if (this.query) {
        let reg = /[，,\s]+/g
        let arr = this.query.replace(reg, '|').split('|').filter((item) => { return item !== '' })
        this.tags = arr.concat(this.tags)
        this.query = ''
        this.edit = false
      }
    }
  },
  mounted() {
  }
}
</script>

